<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="css/recommend.css">
    <link rel="stylesheet" href="font/iconfont.css">
</head>

<body>
    <!-- 头部 -->
    <header>
        <article>
            <ul class="list">
                <li><a href="all.html">全部</a></li>
                <li><a href="recommend.html">推荐</a></li>
                <li><a href="vip.html">VIP专区</a></li>
                <!-- <li><a href="#">水彩</a></li>
                <li><a href="#">素描</a></li>
                <li><a href="#">彩红</a></li> -->
            </ul>
        </article>
        <article>
            <a href="#" class="iconfont iconscan" style="font-size:0.3rem;color: #aaa"></a>
            <div>
                <a href="search.html" class="iconfont iconmagnifier" style="font-weight: 800"></a>
                <input type="text" class="ipt" placeholder="搜索">
            </div>
            <a href="news.html" style="font-size:0.4rem;line-height: 0.55rem;color: #aaa" class="iconfont iconxiaoxi"></a>
        </article>
    </header>

    <!-- 头部end -->
    <div style="width: 7rem;height:3.5rem;background: red;position: absolute;top: 1.85rem;margin-left: 0.25rem;">
        <ul class="lunbo">
            <li class="slidebox" style="position: absolute; top: 0px; left: 0px; opacity: 1;">
                <a href="#"><img src="img/风景图.jpg" alt="" style="width: 7rem;height:3.5rem;"></a>
            </li>
            <li class="slidebox" style="position: absolute; top: 0px; left: 0px; opacity: 0;">
                <a href="#"><img src="img/大版图.jpg" alt="" style="width: 7rem;height:3.5rem;"></a>
            </li>
            <li class="slidebox" style="position: absolute; top: 0px; left: 0px; opacity: 0;">
                <a href="#"><img src="img/风景图.jpg" alt="" style="width: 7rem;height:3.5rem;"></a>
            </li>
            <li class="slidebox" style="position: absolute; top: 0px; left: 0px; opacity: 0;">
                <a href="#"><img src="img/大版图.jpg" alt="" style="width: 7rem;height:3.5rem;"></a>
            </li>
            <li class="slidebox" style="position: absolute; top: 0px; left: 0px; opacity: 0;">
                <a href="#"><img src="img/风景图.jpg" alt="" style="width: 7rem;height:3.5rem;"></a>
            </li>
        </ul>
    </div>

    <!-- 内容 -->
    <section>
        <div class="box">
            <!-- <dl>
                <dt><a href="#"><img src="img/小图.jpg" alt=""></a></dt>
                <dd>单节课体验</dd>
            </dl>
            <dl>
                <dt><a href="#"><img src="img/小图标2.jpg" alt=""></a></dt>
                <dd>多节课进阶</dd>
            </dl>
            <dl>
                <dt><a href="#"><img src="img/小图标3.jpg" alt=""></a></dt>
                <dd>小班课</dd>
            </dl>
            <dl>
                <dt><a href="#"><img src="img/小图标4.jpg" alt=""></a></dt>
                <dd>直插视频课</dd>
            </dl> -->

        </div>
        <div class="excl" style="font-size: 0.32rem;margin-left: 0.3rem;width: 100%;height: 1rem">
            <i style="display: inline-block;width: 0.08rem;height: 0.34rem;background: #EEC14F;"></i> <span style="display: inline-block;line-height: 1rem;">艺听就懂一让艺术成为一种生活方式</span>
        </div>
        <div class="listen" style="width: 100%;height:2.8rem;background: chocolate;">
            <!-- <div style="color: #fff; width:7rem;height: 0.8rem;margin: 0 auto;display: flex;justify-content: space-between;align-items: center;">
                <dl>
                    <dt style="font-size: 0.32rem;">艺听就懂</dt>
                    <dd>海天听见西方传世名画的故事</dd>
                </dl>
                <a href="#" style="color: #fff;">进入专栏></a>
            </div>
            <div style="width: 7rem;height:1.6rem;background: #fff;margin: 0.1rem auto;display: flex;">
                <a href="#" style="display: inline-block;margin:0.07rem 0.1rem;"><img src="img/mv图片.jpg" alt=""></a>
                <div>
                    <div style="display: flex;flex-direction: column;width: 6rem;height: 0.8rem;margin-top: 0.1rem;">
                        <a href="#" style="color: black">
                            <p>085/365《巴黎圣母院》一起怀念美丽的哥特...</p>
                        </a>
                        <span>导师：齐孝静</span>
                    </div>
                    <div style="display: flex;flex-direction: column;">
                        <span style="color: #EEC14F">已有9808人听过</span>
                        <span>时长：07：10</span>
                    </div>
                </div>
            </div> -->
        </div>
        <div class="excl" style="font-size: 0.32rem;margin-left: 0.3rem;width: 100%;height: 1rem">
            <i style="display: inline-block;width: 0.08rem;height: 0.34rem;background: #EEC14F;"></i> <span style="display: inline-block;line-height: 1rem;">今日推荐一每日一画养心聚气</span>
        </div>
        <div class="tuijian" style="width:7rem;height: auto;margin: 0 auto;border: 0.03rem solid #aaa;border-radius: 0.1rem;">
            <!-- <article class="picture">
                <div class="block">
                    <div>
                        <img style="width: 100%;height:100%" src="img/立秋.jpg" alt="">
                    </div>
                    <div>
                        <div>
                            <p>超写实并不难0基础快速上手掌握</p>
                            <p style="color: #aaa;">今日立，秋蒸茄脯一</p>
                        </div>
                        <div>
                            <span>导师：秦潇</span>
                            <span style="color: #EEC14F; ">35人已购</span>
                        </div>
                    </div>
                </div>
            </article> -->
        </div>
    </section>

    <!-- 底部 -->
    <footer>
        <figure class="shouye">
            <span class="iconfont iconshouye"></span>
            <figcaption>首页</figcaption>
        </figure>
        <figure class="yujian">
            <span class="iconfont iconzhaopian"></span>
            <figcaption>遇见</figcaption>
        </figure>
        <figure class="shequ">
            <span class="iconfont iconshequ-weijihuo"></span>
            <figcaption>社区</figcaption>
        </figure>
        <figure class="wode">
            <span class="iconfont iconwode1"></span>
            <figcaption>我的</figcaption>
        </figure>
    </footer>


    <script src="js/axios.min.js"></script>
    <script src="js/api.js"></script>
    <script src="js/recommend.js"></script>
    <script src="js/animateBak.js"></script>
    <script src="js/common.js"></script>
    <script src="js/lunbo.js"></script>
    <script src="js/jquery-1.11.3.min.js"></script>
    <script src="js/skip.js"></script>


    <script>
        new LunBo('.lunbo')
    </script>

</body>

</html>